<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
        <title>Quản lí nội dung</title>
    </h:head>
    <h:body>
        <link type="text/css" rel="stylesheet" href="../css/main.css" />
        <style type="text/css">                
            .ui-corner-all{
                border-radius: 0px !important
            }
            .ui-tree.ui-widget.ui-widget-content.ui-corner-all{
                border: solid 0px !important;
            }
        </style>
        <style type="text/css">
            .ui-panelgrid td {
                border-color:inherit;
                border-style:solid;
                border-width:0px;
                padding:6px 7.5px;
            }
        </style>
        <style type="text/css">
            td {
                vertical-align: top !important;
            }
            .pnct td{
                vertical-align: middle !important;
            }
        </style>
        <style type="text/css">
            .ui-panel {
                padding:0;
            }
        </style>
        <style type="text/css">
            .ui-widget{font-size:95% !important;}
            .ui-layout-unit-content{background-color: #E5E5E5;border-width: 0px}            
            .ui-widget{border-width: 0px;color: red}
        </style>        
        <div align="center" id="bodyForm" >            
            <div style="width: 100%;">
                <p:layoutUnit id="top" position="north" size="auto">
                    <ui:insert name="menu">
                        <ui:include src="../../templates/menu.xhtml"/>
                    </ui:insert>
                </p:layoutUnit>
                <p:layoutUnit id="center" position="center" size="400">
                    <h1 class="headerbar">Quản lý nội dung</h1>
                    <h:form id="form" style="width: 100%;">
                        <p:growl id="message"/>
                        <h:panelGrid columns="2" style="width: 100%">
                            <p:panel header="#{PP_FORMTREECONTENTS.product}" id="pnltree">
                                <p:tree  id="treeuser" 
                                         value="#{treeContents.root}" var="tree"
                                         selectionMode="single" highlight="true" 
                                         selection="#{treeContents.selectedNodes}">
                                    <p:ajax event="select" update=":form:pnlInput" listener="#{treeContents.onNodeSelect}" /> 
                                    <p:treeNode  expandedIcon="ui-icon-folder-open"  
                                                 collapsedIcon="ui-icon-folder-collapsed">
                                        #{tree.NAME}
                                    </p:treeNode>
                                </p:tree>
                                <p:blockUI id="treeblock" block="pnltree" widgetVar="treeblock"/> 
                            </p:panel>
                            <p:panel id="pnlInput" header="#{PP_FORMTREECONTENTS.contents}" style="width: 940px;">
                                <p:panelGrid columns="6">
                                    <h:outputText value="#{PP_FORMTREECONTENTS.content_name}" style="color:red;"></h:outputText>
                                    <p:inputText disabled="#{treeContents.isbFieldEnable()}" maxlength="200"
                                                 value="#{treeContents.ETT_Contents.CONTENT_NAME}"></p:inputText>
                                    <h:outputLabel value="#{PP_FORMTREECONTENTS.created_time}" style="color:red;"/>
                                    <p:calendar value="#{treeContents.ETT_Contents.CREATED_TIME}" pattern="dd/MM/yyyy HH:mm:ss"  
                                                disabled="#{treeContents.isbFieldEnable()}"
                                                />
                                    <h:outputText value="#{PP_FORMTREECONTENTS.effective_time}" style="color:red;"></h:outputText>
                                    <p:calendar value="#{treeContents.ETT_Contents.EFFECTIVE_TIME}" pattern="dd/MM/yyyy HH:mm:ss"  
                                                disabled="#{treeContents.isbFieldEnable()}"
                                                />
                                    <h:outputText value="#{PP_FORMTREECONTENTS.expiry_time}" style="color:red;"></h:outputText>
                                    <p:calendar value="#{treeContents.ETT_Contents.EXPIRY_TIME}" pattern="dd/MM/yyyy HH:mm:ss"  
                                                disabled="#{treeContents.isbFieldEnable()}"
                                                />
                                    <h:outputLabel value="#{PP_FORMTREECONTENTS.effective_type}" style="color:red;"/>
                                    <p:selectOneMenu disabled="#{treeContents.isbFieldEnable()}" 
                                                     value="#{treeContents.ETT_Contents.EFFECTIVE_TYPE}" >
                                        <f:selectItem itemValue="1" itemLabel="#{PP_FORMTREECONTENTS.effective_till_expiry}"/>
                                        <f:selectItem itemValue="2" itemLabel="#{PP_FORMTREECONTENTS.effective_immediately}"/>
                                    </p:selectOneMenu>

                                    <h:outputText value="#{PP_FORMTREECONTENTS.status}" style="color:red;"></h:outputText>
                                    <p:selectOneMenu disabled="#{treeContents.isbFieldEnable()}" 
                                                     value="#{treeContents.ETT_Contents.STATUS}" >
                                        <f:selectItem itemValue="0" itemLabel="#{PP_FORMTREECONTENTS.disable}"/>
                                        <f:selectItem itemValue="1" itemLabel="#{PP_FORMTREECONTENTS.enable}"/>
                                    </p:selectOneMenu>
                                </p:panelGrid>
                                <div align="center" style="margin-top: 10px;margin-bottom: 10px;margin-left: 10px;">
                                    <p:commandButton  value="#{PP_FORMTREECONTENTS.add}"
                                                      icon="ui-icon-plusthick" style="margin:1px 1px 1px 100px;width: 110px;"
                                                      rendered="#{treeContents.isbRendered()}"
                                                      disabled="#{treeContents.isbDisableAddSearch()}"
                                                      actionListener="#{treeContents.changeState(2, true)}"
                                                      update=":form:pnlInput" oncomplete="treeblock.show()" />
                                    <p:commandButton  value="#{PP_FORMTREECONTENTS.addcopy}" icon="ui-icon-copy" style="margin:1px;width: 110px;"
                                                      rendered="#{treeContents.isbRendered()}"
                                                      disabled="#{!treeContents.isbDisableModifyRemove()}"
                                                      actionListener="#{treeContents.changeState(8, true)}"
                                                      update=":form:pnlInput" oncomplete="treeblock.show()"/>
                                    <p:commandButton  value="#{PP_FORMTREECONTENTS.modify}" icon="ui-icon-wrench" style="margin:1px;width: 110px;"
                                                      rendered="#{treeContents.isbRendered()}"
                                                      disabled="#{!treeContents.isbDisableModifyRemove()}"
                                                      actionListener="#{treeContents.changeState(3, true)}"
                                                      update=":form:pnlInput" oncomplete="treeblock.show()"/>
                                    <p:commandButton  value="#{PP_FORMTREECONTENTS.remove}" icon="ui-icon-trash" style="margin:1px;width: 110px;"
                                                      rendered="#{treeContents.isbRendered()}"
                                                      disabled="#{!treeContents.isbDisableModifyRemove()}"
                                                      onclick="confirmation.show()"
                                                      />
                                    <p:commandButton  value="#{PP_FORMTREECONTENTS.ok}" icon="ui-icon-disk" style="margin:1px 1px 1px 200px; width: 110px;"
                                                      rendered="#{treeContents.isbSave()}" 
                                                      actionListener="#{treeContents.changeState(6, false)}"
                                                      update=":form:pnlInput :form:message :form:tblSys" oncomplete="treeblock.hide()" />
                                    <p:commandButton  value="#{PP_FORMTREECONTENTS.cancle}" icon="ui-icon-cancel" style="margin:1px;width: 110px;"
                                                      rendered="#{treeContents.isbCancel()}" 
                                                      actionListener="#{treeContents.changeState(7, false)}"
                                                      update=":form:pnlInput" oncomplete="treeblock.hide()"/>

                                </div>
                                <p:panel id="pnlData" style="border: none;width: 100%;">
                                    <p:dataTable id="tblSys" 
                                                 var="dataSys" 
                                                 value="#{treeContents.listData}"
                                                 rowKey="#{dataSys.CONTENT_ID}" 
                                                 selection="#{treeContents.selectedRow}" 
                                                 selectionMode="single"
                                                 style="width: 100%;"
                                                 paginator="true" rows="10"  
                                                 paginatorPosition ="bottom"
                                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                                 rowsPerPageTemplate="5,10,15">
                                        <p:ajax event="rowSelect" disabled="#{!treeContents.isbRendered()}"
                                                listener="#{treeContents.onRowSelect()}" 
                                                update=":form:pnlInput" />
                                        <p:ajax event="rowDblselect" disabled="#{!treeContents.isbRendered()}"
                                                listener="#{treeContents.changeState(3, true)}" 
                                                update=":form:pnlInput" />
                                        <f:facet name="header" >  
                                            <h:outputText style="text-align: left;" 
                                                          value="#{PP_FORMTREECONTENTS.list}"></h:outputText>
                                        </f:facet> 
                                        <p:column headerText="#{PP_FORMTREECONTENTS.content_name}" 
                                                  >
                                            <h:outputText value="#{dataSys.CONTENT_NAME}"/>
                                        </p:column>

                                        <p:column headerText="#{PP_FORMTREECONTENTS.created_time}" 
                                                  >
                                            <h:outputText value="#{dataSys.strCREATED_TIME}"/>
                                        </p:column>

                                        <p:column headerText="#{PP_FORMTREECONTENTS.effective_time}" 
                                                  >
                                            <h:outputText value="#{dataSys.strEFFECTIVE_TIME}"/>
                                        </p:column>

                                        <p:column headerText="#{PP_FORMTREECONTENTS.expiry_time}" 
                                                  >
                                            <h:outputText value="#{dataSys.strEXPIRY_TIME}"/>
                                        </p:column>

                                        <p:column headerText="#{PP_FORMTREECONTENTS.effective_type}" 
                                                  >
                                            <h:outputText value="#{dataSys.EFFECTIVE_TYPE eq 1 ? PP_FORMTREECONTENTS.effective_till_expiry:PP_FORMTREECONTENTS.effective_immediately}"/>
                                        </p:column>

                                        <p:column headerText="#{PP_FORMTREECONTENTS.status}" 
                                                  >
                                            <h:outputText value='#{dataSys.STATUS eq 1 ? PP_FORMTREECONTENTS.enable:PP_FORMTREECONTENTS.disable}'></h:outputText>
                                        </p:column>
                                    </p:dataTable>

                                    <style type="text/css">
                                        .accessdtl td {
                                            vertical-align: baseline !important;
                                            text-align: center !important;
                                        }
                                    </style>
                                </p:panel>

                                <p:confirmDialog id="confirmDialog"
                                                 message="#{PP_FORMTREECONTENTS.confirm}"
                                                 header="#{PP_FORMTREECONTENTS.cf_header}" severity="alert"
                                                 widgetVar="confirmation">
                                    <p:commandButton id="confirm" value="#{PP_FORMTREECONTENTS.sure}" 
                                                     oncomplete="confirmation.hide()" actionListener="#{treeContents.changeState(4, false)}" update=":form"
                                                     />
                                    <p:commandButton id="decline" value="#{PP_FORMTREECONTENTS.nyet}"
                                                     onclick="confirmation.hide()" type="button" />
                                </p:confirmDialog>
                            </p:panel>
                        </h:panelGrid>
                    </h:form>
                </p:layoutUnit>
                <p:layoutUnit id="bottom" position="bottom" size="60">
                    <ui:insert name="footer">
                        <ui:include src="../../templates/footer.xhtml"/>
                    </ui:insert>
                </p:layoutUnit>
            </div>
        </div>
    </h:body>
</html>

